<template>
  <LayoutIndex>
    <template v-slot:left>
      <JxScroll
          ref="JxScrollRef"
          class="JxScroll"
          :loading-style="loadingStyle"
          :scroll-style="scrollStyle"
          :item-style="itemStyle"
          :show-params="showParams"
          :data-array="dataArray"
          :total-pages="totalPages"
          :showing="showing"
          :bottom-text="'到底了。。。'"
          @clickNode="clickNode"
          @nextPage="nextPage"
          @changeHeight="changeHeight"
      />
    </template>

    <template v-slot:right>
      <JxDetails ref="JxDetailsRef"/>
    </template>

  </LayoutIndex>
</template>

<script>
import LayoutIndex from "@/components/layout/index.vue";
import JxScroll from "@/components/JxSrcoll/index.vue";
import JxDetails from "@/components/JxDetails/index.vue";
import {paging} from "@/utils";

export default {
  name: "InletCom",
  components: {
    LayoutIndex,
    JxScroll,
    JxDetails
  },
  data() {
    return {
      showParams: 'nameNew', // 要展示的名字
      dataArray: [], // 展示的数组
      totalPages: null,// 总行数
      showing:[['job'],['job','jobYear']],
      page: {
        pageNo: 1,
        pageSize: 20,
      },
      scrollStyle: {
        "width": "100%",
        "padding": "10px",
        "background": "#fafafa",
      },
      itemStyle: {
        "width": "100%",
        "height": "50px",
        "background": "#c5e5ff",
        "margin": "8px 0",
        "border-radius": "8px"
      },
      loadingStyle: {
        "background": "#f0f0f0",
      }
    }
  },
  methods: {
    clickNode(item) {
      this.$refs.JxDetailsRef.personData = item
    },
    nextPage(pageNam) {
      this.getList(true, pageNam)
    },

    getList(isPush = true, pageNam = 1) {
      this.page.pageNo = pageNam

      this.$refs.JxScrollRef.isOpenTimers = true // 开启loading

      setTimeout(() => {
        const {rows, pageNum} = paging(this.page)
        this.totalPages = pageNum
        if (isPush) this.dataArray.push(...rows)
        this.$refs.JxScrollRef.isOpenTimers = false // 关闭loading
      }, 1000)
    },

    changeHeight(val){
      this.$refs.JxDetailsRef.viewportHeight = val
    }
  }
}
</script>

<style>
.hello {
  width: 200px;
  height: 100%;
  background: #cccccc;
  overflow-y: auto;
  box-sizing: border-box;
}

.loading {
  width: 200px;
  height: 200px;
  line-height: 200px;
}
</style>